<template>
  <div class="score orderList orderLayout">
    <div class="content">
      <div class="nav-bar" style="height:1.2rem;">
      </div>
      <div>
        <div class="scoreDetail">
          <div class="info">
            <div>
              <ul>
                <li class="lighter-gray fz12">成功邀请</li>
                <li class="fz18 black">{{total.number}}</li>
              </ul>
            </div>
            <div class="line"></div>
            <div>
              <ul>
                <li class="lighter-gray fz12">订单数量</li>
                <li class="fz18 black">{{total.orderNo}}</li>
              </ul>
            </div>
            <div class="line"></div>
            <div>
              <ul>
                <li class="lighter-gray fz12">获得积分</li>
                <li class="fz18 black">{{total.credit}}</li>
              </ul>
            </div>
          </div>
        </div>
        <p class="member-congratutation-info" v-if="inviterCredit.length > 0 "><img src="../../../img/smile2.png" alt="" class="fufill_icon">恭喜您已成功邀请{{inviterCredit.length}}名会员啦！</p>
        <p class="member-congratutation-info" v-else><img src="../../../img/smile2.png" alt="" class="fufill_icon">您还没有邀请任何会员哦！</p>
        <div v-if="inviterCredit.length > 0">
            <div class="member-list" v-for="(credit,index) in filterInviteCredit">
              <div class="item" v-for="item in credit.data" v-if="item">
                <ul>
                  <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/avatar_icon_man.png" alt=""></li>
                  <li><span class="name">{{item.username}}</span></li>
                  <li><span class="name">{{item.phone}}</span></li>
                  <li><span class="member-score">积分:{{item.credit}}</span></li>
                  <li><span class="member-score">订单数:{{item.orderNo}}</span></li>
                </ul>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { getRedeemReward } from "api/moneyBack"
import { wxshare } from 'common/mixin'

export default {
  mixins: [wxshare],
  data() {
    return {
      total: {
        number: 0,
        orderNo: 0,
        credit: 0
      },
      inviterCredit: {},
      filterInviteCredit: []
    }
  },
  methods: {
    ...mapActions({
      Users: 'Users'
    }),
  },
  mounted() {
    this.Users().then(result => {
      this.total.number = result.data.length
      for (var i = result.data.length - 1; i >= 0; i--) {
        this.total.orderNo += result.data[i].orderNo
        this.total.credit += result.data[i].credit
      }
      this.inviterCredit = result.data;
      this.filterInviteCredit = [];
      if (this.inviterCredit.length > 0) {

        var j = 1;
        var temp = [];
        for (let i = 0; i < this.inviterCredit.length; i++) {
          temp.push(this.inviterCredit[i]);
          j++;
          if (j == 4 || i == this.inviterCredit.length - 1) {
            if (j == 4) {
              this.filterInviteCredit.push({
                data: temp,
                isFull: true
              });
            } else {
              temp.length = 3;
              this.filterInviteCredit.push({
                data: temp,
                isFull: false
              });
            }

            j = 1;
            temp = [];
          }
        }
      }
    })
  },
}

</script>
<style lang="less">
@import '../order/orderList.less';
@import '../order/orderPre.less';
@import '../mine/score.less';
.orderLayout .content {
  background-image: url(http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-header-background.png)
}

</style>
